<template>
	<view>
		<view :class="iskey?'mask':''"></view>
		<list :item="item" :index="index" @openmsg="openmsg" @openshare="openshare">
			<view class="">
				<view class="">
					{{ item.content }}
				</view>
				<view class="" v-for="(item2, index2) in imagelist" :key="index2">
					<image :lazy-load="true" :src="item2" class="w-100" mode="widthFix" @click="priviewImage(index2)"></image>
				</view>
			</view>
		</list>
		<divider></divider>
		<view class="p-2 font-md font-weight-bold">
			最新评论 {{item.commentCount}}
		</view>
		<!-- 评论区域 -->
		<view class="p-2" v-for="(item,index) in (commentList)" :key="index">
			<template v-if="item.fid===0" >
				<view class="flex align-start" :class="{ 'not-clickable': !iskey }">
					<image class="rounded-circle" @click="openuserspace(item.userId,item.nikeName,item.userPic)" :src="item.userPic" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
				<view class="flex-column justify-around pl-2" @click="pinlun(item.id,item.nikeName,1)" >
					<text style="color: aqua;">{{item.nikeName}}</text>
				<view style="max-width: 400rpx;word-wrap: break-word;" class="py-1">{{item.data}}</view>
				<text class="text-light-muted font-sm">{{item.createTime|getTime}}</text>
				</view>
				</view>
			</template>
			
			<template v-else>
				<view class="flex align-start pl-4"  :class="{ 'not-clickable': !iskey }">
					<image class="rounded-circle" @click="openuserspace(item.userId,item.nikeName,item.userPic)" :src="item.userPic" style="width: 60rpx;height: 60rpx;" mode="aspectFill"></image>
				<view class="flex-column justify-around pl-2" @click="pinlun(item.id,item.nikeName,1)">
					<text style="color: aqua;">{{item.nikeName}} </text> <text class="ml-2 text-light-muted font-sm">回复:  {{gethuihuname(item.fid)}}</text>
				<view style="max-width: 400rpx;word-wrap: break-word;" class="py-1">{{item.data}}</view>
				<text class="text-light-muted font-sm">{{item.createTime|getTime}}</text>
				</view>
				</view>
			</template>
			
			
		</view>
		<loadmore v-if="item.commentCount > 5" :loadmore="item.loadmore"></loadmore>
		
		<!-- 这里是帮下面的fixed布局的元素占位 -->
		<view class="" style="height: 100rpx;"></view>
		<view class="fixed-bottom px-3 flex align-center border-top bg-white" style="height: 100rpx;">
			<view class="flex-1">
				<!-- @click="iskey = !iskey" -->
				<input   :placeholder="placeholder" :focus="iskey"  @focus="pinlun(0,'',0)" @blur="blur"  class="bg-light border-0" style=" width: 100%;" v-model="content" @confirm="Send()"></input>
			</view>
			<view class="flex align-center justify-center ml-2 font-lg" @click="Send">
				<text class="iconfont icon-jijianfasong"></text>
			</view>
		</view>
		
		<!-- 弹出层（分享） -->
		<template>
			<u-popup v-model="show" mode="bottom" border-radius="10">
				<view class="px-2">
					<view class="text-center font-md font-weight-bold py-2">分享到</view>
					<view class="flex justify-around align-center">
						<block v-for="(item, index) in list" :key="index">
							<view class="flex-column align-center justify-center" @click="share(item.title)">
								<view class="flex align-center justify-center rounded-circle" style=" width: 100rpx; height: 100rpx" :style="{backgroundColor:item.bgcolor}">
									<text style="color: white" class="iconfont  font-lg" :class = "item.icon"></text>
								</view>
								<view class="text-center font-sm">{{item.title}}</view>
							</view>
						</block>
					</view>
					
					<view class="text-center font-md font-weight-bold py-2" @click="show=false">取消</view>
				</view>
			</u-popup>
		</template>

	</view>
</template>

<script>
import list from '../../compoment/IndexCommen/list.vue';
import {getComment,addComment,getPostDetail,getisFollow} from '@/request/Api/post.js'
import $T from '@/common/time.js';
export default {
	data() {
		return {
			item: {},
			index: '',
			show:false,
			list:[],
			iskey:false,
			content:'',
			commentList:[],
			placeholder:'请输入',
			ref_id:0,
			page:1,
			size:6,
			imagelist:[],
			shares:[]
		};
	},
	onPullDownRefresh() {
	    console.log('到底了')	
	},
	onShow() {
	uni.$on('followOrdosupport',(res)=>{
		if (res.type === 'dosupport') {
			this.dosupport({ num: res.num, id: res.id });
		}
		else{
			this.item.isFollow = res.num
		}
	})	
	},
	onLoad(e) {
		// 设置
		let obj = uni.getStorageSync('DetailItem')
		this.item = obj;
		this.item.loadmore = '上拉加载更多'
		getPostDetail(obj.id).then((res)=>{
			this.imagelist = res.data.imgList
			this.shares = res.data.share
		})
		
		
		this.index = Number.parseInt(e.index);
		uni.setNavigationBarTitle({
			title: obj.title
		});
		this.getpinlun(obj.id,false)
		uni.getProvider({
			service: 'share',
			success:(res)=> {
				res.provider.forEach((item)=>{
					switch (item){
						case 'weixin':
							this.list.push({
								title:'微信好友',
								icon:'icon-weixin',
								bgcolor:'#2ad19b'
							})
							break;
						case 'qq':
							this.list.push({
								title:'QQ好友',
								icon:'icon-QQ',
								bgcolor:'#5280ce'
							})
							break;
						case 'sinaweibo':
							this.list.push({
								title:'微博好友',
								icon:'icon-xinlangweibo',
								bgcolor:'#ee5e5e'
							})
							break;
						default:
							break;
					}
				})
			}
		})
	},
	components: {
		list
	},
	filters:{
	
	getTime(value)
		{
		return	$T.gettime(value)
		}
	},
	onNavigationBarButtonTap(e) {
		if(e.index===0)
		{
			this.show=true
		}
	},
	onReachBottom() {
	if(this.item.loadmore!=='上拉加载更多')
		{
			return
		}
	this.page = this.page+1
	this.item.loadmore = '加载中...'
	uni.showLoading({
		mask:true
	})
	getComment({postId:this.item.id,current:this.page,size:this.size}).then((res)=>{
		this.commentList = [...this.commentList,...res.data]
		if(res.data.length===0)
		{
			this.item.loadmore="没有更多了"
		}
		else{
			this.item.loadmore = '上拉加载更多'
		}
		uni.hideLoading()
	}).catch((res)=>{
		this.page--
		this.item.loadmore = '上拉加载更多'
		uni.hideLoading()
	})
	},
	watch:{
		ref_id :{
			handler(newVal,oldVal)
			{
				this.content=''
			},
			deep:true,
			immediate:true
		}
	},
	methods: {
		openuserspace(userId,nikename,userPic) {
		const userinfo = uni.getStorageSync('userInfo')
			if(userinfo)
			{
				uni.setStorageSync('image',userPic)
				if(userinfo.id===userId)
				{
					
						uni.navigateTo({
							url: '/pages/user-space/user-space?userId=' + userId+"&nikeName="+nikename
						});
				
				}
				else{
					getisFollow({userId:userinfo.id,followId:userId}).then((res)=>{
						const isFollow = res.data
						uni.navigateTo({
							url: '/pages/user-space/user-space?userId=' + userId+"&nikeName="+nikename+"&isFollow="+isFollow
						});
					})
				}
				
				
			}
			else{
				uni.navigateTo({
					url: '/pages/user-space/user-space?userId=' + this.item.userId+"&nikeName="+this.item.nikeName+"&isFollow="+0
				});
			}
			
		},
		getpinlun(postId,isLoading)
		{
		this.page = 1
		this.item.loadmore = '上拉加载更多'
		uni.showLoading({
			mask:true
		})
		getComment({postId:postId,current:1,size:this.size}).then((res)=>{
			this.commentList = res.data
			uni.hideLoading()
		}).catch((res)=>{
			uni.hideLoading()
		})	
		},
		
		gethuihuname(fid)
		{
			return this.commentList.find(res=>res.id===fid).nikeName
		},
		sharename(value)
		{
			if(value==='微信朋友')
			{
				return 'weixin'
			}
			else if(value==='微博好友')
			{
				return 'sinaweibo'
			}
			else if(value==='QQ好友')
			{
				return 'qq'
			}
		},
		blur()
		{
				if(this.content==='')
				{
					this.ref_id = 0
				}
				this.iskey = false
				uni.hideKeyboard()
				this.placeholder = '请输入',
				uni.offKeyboardHeightChange((res)=>{
					res.height>0?'':this.iskey=false
				})
		},
		pinlun(Id,name,isinput)
		{       		
			if(isinput===0)
				{
					this.iskey = true,
					uni.onKeyboardHeightChange((res)=>{
						res.height>0?'':this.iskey=false
					})
					return
				}
				 this.ref_id = Id
				 this.iskey = true,
				  this.placeholder = '回复:'+name,
				 uni.onKeyboardHeightChange((res)=>{
						res.height>0?'':this.iskey=false
				 })
		},
		onunload()
		{
			uni.$off('followOrdosupport',(res)=>{})
		},
		
		Send()
		{
			if(this.content==='')
			{
				uni.showToast({
					icon:'none',
					title:'请输入内容'
				})
				return
			}
			addComment({
				fid:this.ref_id,
				data:this.content,
				postId:this.item.id
			}).then((res)=>{
				this.item.commentCount++
				uni.$emit('commentCount',{num:this.item.commentCount,id:this.item.id})
				this.content=''
				uni.showToast({
					icon:'success',
					title:'评论成功'
				})
				// 直接更新本地评论列表
				const newComment = {
					id: res.data.id,
					userId: res.data.userId,
					fid: res.data.fid,
					data: res.data.data,
					createTime: res.data.createTime,
					postId: res.data.postId,
					userPic: res.data.userPic,
					nikeName: res.data.nikeName,
					fnum: res.data.fnum
				}
				// 如果是回复评论，将新评论插入到对应位置
				if(this.ref_id !== 0) {
					const index = this.commentList.findIndex(item => item.id === this.ref_id)
					if(index !== -1) {
						this.commentList.splice(index + 1, 0, newComment)
					}
				} else {
					// 如果是新评论，直接添加到列表开头
					this.commentList.unshift(newComment)
				}
				this.blur()
			})
		},
		//分享
		share(title)
		{
			let type = this.sharename(title)
			uni.share({
				provider: type,
				scene: "WXSceneSession",
				type: 2,
				imageUrl: "https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=D66BA18EE154D133745ABEF43F0A4AE1418ADA84",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});


		},
		//关注
		
		//顶踩
		//顶踩
		dosupport(e) {
			let item = this.item;
			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		},
		openmsg(e) {
			this.pinlun(0,'',0)
		},
		openshare(e) {
			this.show = true
		},
		// 预览图片
		priviewImage(index) {
			uni.previewImage({
				urls: this.imagelist,
				// 这是图片的索引，从0开始
				current: index
			});
		}
	}
};
</script>

<style>
	page {
		box-sizing: border-box;
	}
	
</style>
